一个简单的react 动画组件，入场动画和出场动画实现

一：前言

关于react 动画组件已经有很多，最近想自己做一个，目的就是依赖css3动画，这样能保证性能，项目种简单动画足够了；如果要复杂一些的动画，那就依赖于js了，本篇主要实现一个Animate组件，给组件内部添加元素的入场动画和出场动画，于是就花费半天时间试试，主要采用animate.css，大家一定很熟悉，下面就是思路和代码，肯定有需要完善的地方，请各位大神批评指导。

二：Animate组件

首先要引入 animate.css

import React from 'react';

export default class Animate extends React.Component {
    state = {
        animateName: '',//切换动画class名称
        animateChild: null,//做一个缓存
    }

    currentTime = new Date()

    componentWillReceiveProps(nextProps) {
        let prevChild = this.props.children
        let nextChild = nextProps.children
        let { enterClass, leaveClass } = this.props
        let expirationTime = new Date()
        if(!this._isExpiration(expirationTime)){
            return
        }//防止过快点击
        this.currentTime = expirationTime
        if(nextChild !== null){
            this.setState({
                animateChild: nextChild,
                animateName: enterClass,
            })
        } else if (prevChild !== null) {
            this.setState({
                animateName: leaveClass,
            })
            setTimeout(()=>{
                this.setState({
                    animateChild: null,
                })
            },500)// 离场延迟时间，也可以传props
        } else {
            return
        }
    }

    _isExpiration(expirationTime) {
        return expirationTime.getTime() - this.currentTime.getTime() > 500
    }

    render() {
        const { animateName, animateChild } = this.state
        return (
            <span className={'animated ' + animateName} style={{ display: 'block' }}>
                {animateChild}
            </span>
        )
    }

}

三：调用

import React from 'react';
import styles from './index.less';
import Animate from '../components/index';

export default class AnimatedDemo extends React.Component {
  state = {
    show: false,
  }
  render() {
    const { show } = this.state

    return (
      <div className={styles.Reading_activity}>
        <Animate enterClass='slideInRight' leaveClass='bounceOutRight'>
          {show ? <div className={styles.site__title + ' ' + styles.mega}>Animate.css</div> : null}
        </Animate>
        <button onClick={()=>{this.setState({show: false})}}>消失</button>
        <button onClick={()=>{this.setState({show: true})}}>出现</button>
      </div>
    )
  }

}

就到这里，下期见